<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学员成绩</title>
  <!-- 导入bootstrap -->
  <script src="./assets/lib/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css" />
  <script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
  <!-- bootstrap提示框 -->
  <script src="./assets/lib/toasts.js"></script>
  <!-- 导入axios + axios全局配置 -->
  <script src="./assets/lib/axios.js"></script>
  <script src="./assets/utils/request.js"></script>
  <!-- 导入自己写的css -->
  <link rel="stylesheet" href="./assets/css/score.css" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid header">
      <h1>学员成绩</h1>
      <p>点击表格修改或录入</p>
    </div>
  </nav>

  <!-- table-striped隔行换色 -->
  <table class="table table-striped">
    <colgroup>
      <col width="14%" />
      <col width="16%" />
      <col width="14%" />
      <col width="14%" />
      <col width="14%" />
      <col width="14%" />
      <col width="14%" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">学员ID</th>
        <th scope="col">姓名</th>
        <th scope="col">第1次成绩</th>
        <th scope="col">第2次成绩</th>
        <th scope="col">第3次成绩</th>
        <th scope="col">第4次成绩</th>
        <th scope="col">第5次成绩</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
          <th scope="row">10</th>
          <td>张三</td>
          <td class="score">70</td>
          <td class="score">70</td>
          <td class="score">70</td>
          <td class="score">70</td>
          <td class="score">70</td>
        </tr> -->
    </tbody>
  </table>

  <!-- 页面js代码 -->
  <script src="./assets/js/score.js"></script>
  <script src="./assets/js/common.js"></script>
  <script>
    /* 1.页面一加载,发送ajax请求学员成绩列表
    2.点击分数td,给当前td动态添加一个input输入框
         * (1)td标签是动态新增的元素,需要注册委托事件
         * (2)学员id和姓名不能修改，只有分数才可以修改
         * (3)输入框默认显示当前点击的td的文本
    3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框 */
    async function getScore() {
      const res = await axios({
        url: 'score/list'
      })
      //console.log(res)//data.data  
      //for in写法
      /* let obj = res.data.data
      for (let k in obj) {
        // console.log(k)
        //console.log(obj[k])
        document.querySelector('tbody').innerHTML += `
         <tr data-id="${k}">
           <th scope="row">${k}</th>
           <td>${obj[k].name}</td>
           <td class="score" data-id=1>${obj[k].score[0]}</td>
           <td class="score" data-id=2>${obj[k].score[1]}</td>
           <td class="score" data-id=3>${obj[k].score[2]}</td>
           <td class="score" data-id=4>${obj[k].score[3]}</td>
           <td class="score" data-id=5>${obj[k].score[4]}</td>
         </tr>
         `
      } */

      //for Each 写法
      let data = res.data.data
      //console.log(data)
      for (let k in data) {
        data[k].id = k //将键名k赋值给数组里面的值data[k]的id
        //console.log(k)k是键名,内容是数字
        //console.log(data[k])//数组
        //console.log(data[k].id)
      }
      const obj = Array.from(Object.values(data))
      //console.log(obj)
      document.querySelector('tbody').innerHTML = obj.map(item =>
        `<tr><th scope="row">${item.id}</th>
     <td >${item.name}</td>
     ${item.score.map((ele, index) => `<td class="score" data-id='${item.id}' data-batch='${index + 1}'>${ele}</td>`).join('')}
   </tr>`).join('')

    }
    getScore()


    //输入框焦点事件：移除输入框
    //输入框enter事件：获取分数 ，发送ajax , 移除输入框 ， 刷新列表

    document.querySelector('tbody').addEventListener('click', e => {
      if (e.target.classList.contains('score')) {

        //const id = e.target.dataset.id
        // const stuId = e.target.parentNode.dataset.id
        // console.log(e.target.innerText);
        // const vau = e.target.innerText
        // console.log(stuId);
        // console.log(id);

        //先创建一个input
        const inp = document.createElement('input')
        inp.classList.add('inp')
        e.target.appendChild(inp)//e.target是td
        inp.value = e.target.innerText
        inp.focus()//获取焦点
        inp.addEventListener('blur', (e) => {
          e.target.remove()//直接清除
        })

        inp.addEventListener('keyup', async e => {
          //输入框enter事件

          if (e.key === 'Enter') {
            //console.log(1111)
            // 获取发请求
            const res = await axios({
              url: '/score/entry',
              method: 'post',
              data: {
                batch: e.target.parentNode.dataset.batch,
                stu_id: e.target.parentNode.dataset.id,
                score: e.target.value
              }
            })
            // console.log(res.data.message);
            Toast.success(res.data.message)
            getScore()
            // inp.remove()
            /* setTimeout(() => {
              location.reload()
            }, 1000) */
          }
        })
      }
    })



  </script>
</body>

</html>